<template>
	<view class="topic_result_layout flex-column">
		<view class="header_container flex-row">
			<l-circle :percent='percent' strokeWidth='6' :duration='2500' size='100' canvas>
				<view class="header_percentage flex-column centent-parent">
					<view class="header_percentage_number flex-row centent-parent">
						<view class="header_percentage_correct">{{data?.correct_answers}}</view>
						/{{data?.topics.length}}
					</view>
					<view class="header_percentage_tips">答题数/总题数</view>
				</view>
			</l-circle>
			<view class="header_trailing flex-1 flex-column">
				<view class="header_trailing_title">
					{{data?.storehouse.title}}
				</view>
			</view>
		</view>
		<view class="infos_container flex-1">
			答题情况
			<view class="infos_legend flex-row">
				<view class="infos_legend_container flex-row">
					<view class="infos_legend_correct_circle"> </view>
					正确
				</view>
				<view class="infos_legend_container flex-row">
					<view class="infos_legend_error_circle"> </view>
					错误
				</view>
				<view class="infos_legend_container flex-row">
					<view class="infos_legend_miss_circle"> </view>
					未答
				</view>
				<view class="infos_legend_length">
					共{{data?.topics.length}}题
				</view>
			</view>
			<view class="infos_grid">
				<view v-for="(item,index) in data?.topics" :key="item._id" class="infos_grid_container ">
					<view
						:class="['infos_grid_item', topic_is_answer(item) ? (item.is_correct ? '' : 'infos_grid_item_error') : 'infos_grid_item_miss']">
						{{index+1}}
					</view>
				</view>
			</view>
		</view>
		<view class="toolbar flex-row">
			<view class="toolbar_analysis flex-1 flex-row centent-parent" @click="error_analysis_click">
				查看错题解析
			</view>
			<view class="toolbar_continue flex-1 flex-row centent-parent" @click="continue_practicing">
				继续练习
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	const percent = ref(null)
	// 考试id
	let exams_id;
	// uniCloud
	const topic_exams = uniCloud.importObject('topic-exams')
	// 数据
	const data = ref(null)
	// onLoad
	onLoad(async (params) => {
		exams_id = params.id
		let res = await topic_exams.exam_detail(exams_id)
		if (res.errCode != 0) {
			return
		}
		data.value = res.data[0]
		// 计算答对数量
		data.value.correct_answers = data.value.topics.filter(item => item.is_correct).length
		// 百分比
		percent.value = data.value.correct_answers / data.value.topics.length * 100
		console.log("答题结果", data.value);
	})
	/* 查看错题解析 */
	function error_analysis_click() {
		uni.navigateTo({
			url: '/pages_lianxi/linianzhenti/topic_error_analysis?id=' + exams_id
		})
	}
	/* 继续练习 */
	function continue_practicing() {
		uni.navigateBack({
			delta: 1
		})
	}
	/* 该题是否已答 */
	function topic_is_answer(item) {
		if ([0, 1, 2].includes(item.topic.question_type)) {
			return item.user_answer.length > 0
		} else if (item.topic.question_type == 3) {
			return item.answer_content.length > 0
		}
		return false
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.topic_result_layout {
		height: 100%;

		.header_container {
			padding: 40rpx 60rpx;
			border-bottom: 1rpx solid $me-color-background;

			.header_percentage {

				.header_percentage_number {
					font-size: 30rpx;
					color: $me-color-gray-1;
				}

				.header_percentage_correct {
					font-size: 30rpx;
					color: $me-color-blue;
				}

				.header_percentage_tips {
					margin-top: 10rpx;
					font-size: 18rpx;
					color: $me-color-gray-7;
				}
			}

			.header_trailing {
				margin-left: 26rpx;

				.header_trailing_title {
					font-size: 32rpx;
				}
			}
		}

		.infos_container {
			padding: 40rpx 34rpx;
			font-size: 32rpx;

			.infos_legend {
				margin-top: 27rpx;

				.infos_legend_container {
					align-items: center;
					font-size: 24rpx;
					width: 150rpx;

					.infos_legend_correct_circle {
						width: 20rpx;
						height: 20rpx;
						background-color: $me-color-green-1;
						border-radius: 50%;
						margin-right: 10rpx;
					}

					.infos_legend_error_circle {
						width: 20rpx;
						height: 20rpx;
						background-color: $me-color-red-1;
						border-radius: 50%;
						margin-right: 10rpx;
					}

					.infos_legend_miss_circle {
						width: 20rpx;
						height: 20rpx;
						background-color: $me-color-gray-3;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}

				.infos_legend_length {
					display: flex;
					flex: 1;
					justify-content: flex-end;
					color: $me-color-gray-6;
				}
			}

			.infos_grid {
				display: grid;
				gap: 0rpx;
				grid-template-columns: repeat(6, 1fr);

				.infos_grid_container {
					margin-top: 60rpx;

					.infos_grid_item {
						display: flex;
						align-items: center;
						justify-content: center;
						color: white;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background-color: $me-color-green-1;
					}

					.infos_grid_item_error {
						background-color: $me-color-red-1;
					}

					.infos_grid_item_miss {
						background-color: $me-color-gray-3;
					}
				}
			}
		}

		.toolbar {
			padding: 4rpx 40rpx;
			border-top: 1rpx solid $me-color-background;
			height: calc(88rpx + env(safe-area-inset-bottom));
			justify-content: space-between;

			.toolbar_analysis {
				color: white;
				height: 80rpx;
				border-radius: 8rpx;
				background-color: $me-color-gray-1;
			}

			.toolbar_continue {
				color: white;
				height: 80rpx;
				border-radius: 8rpx;
				margin-left: 70rpx;
				background-color: $me-color-blue;
			}
		}
	}
</style>